import React, { Component } from "react";
import { createForm } from "rc-form"; //用于表单;校验
import { List, InputItem, Toast, Button } from "antd-mobile";
import userLogo from "../assets/imgs/user-logo.png";
import { getLoginHandle } from "../api";
import { connect } from "react-redux";

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      mobile: "15112525173",
      password: "123456",
      userinfo: "",
    };
  }
  //登录
  handleLogin = async () => {
    this.props.form.validateFields(async (error, value) => {
      if (error) return Toast.fail("请检查是否填写正确", 1);
      this.setState({ loading: true });
      let res = await getLoginHandle(this.state);
      if (res.code !== 200) return Toast.fail(res.msg);
      this.setState({ loading: false });
      sessionStorage.setItem("mytoken", JSON.stringify(res.data.token));
      Toast.fail(res.msg, 1, () => {
        // this.props.history.push("/");
        this.props.setLoginState(true); //调用redux修改登录状态为true
        // 直接根据PrivateRoute组件传递过来的参数来跳转，如果没有则跳转/
        let { from } = this.props.location.state || { from: { pathname: "/" } }
        this.props.history.push(from.pathname);
      });
    });
  };
  // 注册
  handleRegister = () => {
    this.props.history.push("/register");
  };

  render() {
    // 先从form属性取出getFieldProps，getFieldError两个属性，这两个属性是两个方法
    const { getFieldProps, getFieldError } = this.props.form;
    return (
      <div>
        <div className="userLogo">
          <img src={userLogo} alt="" />
        </div>
        {/* 用户下单的表单数据 */}
        <List style={{ backgroundColor: "white" }} className="picker-list">
          {/*
            error是一个布尔值，用来展示错误的样式的
            onErrorClick 点击错误图标执行的事件
            利用getFieldProps方法在InputItem组件中自定义需要校验的字段名，然后还要定义它的校验规则
            getFieldProps注意要放在value和onChange之前⭐
            getFieldError在获取错误校验信息时，里面的参数必须和getFieldProps定义的字段名保持一致
            validateTrigger用于设置触发校验的方式2
            rules用于设置校验规则
           */}
          <InputItem
            placeholder="请输入账号"
            error={getFieldError("mobile") ? true : false}
            onErrorClick={() => Toast.fail("请输入账号", 1)}
            {...getFieldProps("mobile", {
              validateTrigger: "onBlur",
              rules: [{ required: true }],
            })}
            onChange={(v) => this.setState({ mobile: v })}
            value={this.state.mobile}
          >
            <span style={{ color: "red" }}>*</span>账号
          </InputItem>
          <InputItem
            placeholder="请输入密码"
            error={getFieldError("password") ? true : false}
            onErrorClick={() => Toast.fail("请输入密码！", 1)}
            {...getFieldProps("password", {
              validateTrigger: "onBlur",
              rules: [{ required: true }],
            })}
            onChange={(v) => this.setState({ password: v })}
            value={this.state.password}
          >
            <span style={{ color: "red" }}>*</span>密码
          </InputItem>

          <Button
            style={{ marginTop: "15px" }}
            loading={this.loading}
            type="primary"
            onClick={this.handleLogin}
          >
            登录
          </Button>
          <Button
            type="primary"
            style={{ marginTop: "5px" }}
            onClick={this.handleRegister}
          >
            注册
          </Button>
        </List>
        <style jsx>
          {`
            .userLogo {
              width: 100%;
              > img {
                display: block;
                width: 100%;
              }
            }
          `}
        </style>
      </div>
    );
  }
}
// redux 修改登录状态
const mapActionToprops = (dispatch) => {
  return {
    setLoginState: (flag) => {
      dispatch({ type: "SET_LOGIN_STATE", payload: flag });
    },
  };
};

export default connect(null, mapActionToprops)(createForm()(Login));
